import { observer } from 'mobx-react'
import React, { useState } from 'react'
import type { PopconfirmProps } from 'antd'
import {
  Layout,
  Form,
  Input,
  Select,
  DatePicker,
  Button,
  Row,
  Col,
  Divider,
  Table,
  Badge,
  Space,
  Popconfirm,
  message
} from 'antd'
import { useNavigate } from 'react-router-dom'
import type { ColumnsType } from 'antd/es/table'

const { Content } = Layout
const { RangePicker } = DatePicker

interface RoleItem {
  key: number
  index: number
  roleName: string // 角色名称
  roleId: string // 角色标识
  roleDesc: string // 角色描述
  dataPermission: string // 数据权限
  status: '正常' | '禁用'
  operator: string // 操作人
  time: string // 操作时间
}

const initialData: RoleItem[] = [
  {
    key: 1,
    index: 1,
    roleName: '管理员',
    roleId: 'system',
    roleDesc: '描述112312323232...',
    dataPermission: '全部',
    status: '正常',
    operator: 'admin',
    time: '2022-02-20 13:50:15',
  },
  {
    key: 2,
    index: 2,
    roleName: '管理员1',
    roleId: 'system1',
    roleDesc: '描述112312323232...',
    dataPermission: '全部',
    status: '禁用',
    operator: 'admin',
    time: '2022-01-29 13:20:10',
  },
  {
    key: 3,
    index: 3,
    roleName: '后端开发',
    roleId: 'system2',
    roleDesc: '描述112312323232...',
    dataPermission: '自定义',
    status: '禁用',
    operator: 'admin',
    time: '2022-01-27 19:21:23',
  },
  {
    key: 4,
    index: 4,
    roleName: '风控',
    roleId: 'system3',
    roleDesc: '描述112312323232...',
    dataPermission: '自定义',
    status: '禁用',
    operator: 'admin',
    time: '2022-01-20 22:51:34',
  },
  {
    key: 5,
    index: 5,
    roleName: '市场',
    roleId: 'system4',
    roleDesc: '描述112312323232...',
    dataPermission: '本级及子级',
    status: '正常',
    operator: 'admin',
    time: '2022-01-11 17:21:10',
  },
  {
    key: 6,
    index: 6,
    roleName: '客服1',
    roleId: 'system5',
    roleDesc: '描述112312323232...',
    dataPermission: '本级',
    status: '正常',
    operator: 'admin',
    time: '2022-01-09 02:35:54',
  },
  {
    key: 7,
    index: 7,
    roleName: '客服12',
    roleId: 'system6',
    roleDesc: '描述112312323232...',
    dataPermission: '本人',
    status: '禁用',
    operator: 'admin',
    time: '2021-12-23 19:35:29',
  },
]

const TenantManagement: React.FC = () => {
    const [data, setData] = useState<RoleItem[]>(initialData)
    const navigate = useNavigate()

    // 定义表格列
    const columns: ColumnsType<RoleItem> = [
      {
        title: '序号',
        dataIndex: 'index',
        width: 80,
        align: 'center',
      },
      {
        title: '角色名称',
        dataIndex: 'roleName',
        width: 120
      },
      {
        title: '角色标识',
        dataIndex: 'roleId',
        width: 120
      },
      {
        title: '角色描述',
        dataIndex: 'roleDesc',
        ellipsis: true,
        width: 120
      },
      {
        title: '数据权限',
        dataIndex: 'dataPermission',
        align: 'center',
        width: 120
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 80,
        align: 'center',
        render: (status) => {
          const color = status === '正常' ? 'green' : 'red'
          return (
            <Space>
              <Badge color={color} />
              {status}
            </Space>
          )
        },
      },
      {
        title: '操作人',
        dataIndex: 'operator',
        width: 100,
        align: 'center',
      },
      {
        title: '操作时间',
        dataIndex: 'time',
        width: 180,
      },
      {
        title: '操作',
        key: 'action',
        width: 150,
        fixed: 'right',
        render: (_, record) => (
          <div className='table-cell-actions'>
            <Button type="link" onClick={() => handleEdit(record)}>修改</Button>
            {record.status === '禁用' ? (
              <Button type="link" onClick={() => handleEnable(record)}>
                启用
              </Button>
            ) : (
              <Button type="link" onClick={() => handleDisable(record)}>
                禁用
              </Button>
            )}
            <Popconfirm
              key="delete"
              placement="topRight"
              title="确定要删除吗?"
              onConfirm={handleConfirm}
              onCancel={handleCancel}
              okText="确定"
              okType="danger"
              cancelText="取消"
            >
              <Button
                type="link"
                danger
                key="delete"
              >
                删除
              </Button>
            </Popconfirm>
          </div>
        ),
      },
    ]
    const handleConfirm: PopconfirmProps['onConfirm'] = (e) => {
      console.log(e)
      message.success('点击确定')
    }
    const handleCancel: PopconfirmProps['onCancel'] = (e) => {
      console.log(e)
      message.error('点击取消')
    }
    // 搜索表单提交
    const onFinish = (values: any) => {
      console.log('搜索条件:', values)
    }

    // 搜索表单重置
    const onReset = () => {
      console.log('重置搜索条件')
      // form.resetFields();
    }

    // 新增按钮
    const handleCreate = () => {
      navigate('/setting/enterpriseManagement/tenantManagement/add')
    }

    // 修改
    const handleEdit = (record: RoleItem) => {
      console.log('修改角色', record)
      // navigate('/setting/enterpriseManagement/staffManagement/edit', { state: { record } })
    }

    // 启用
    const handleEnable = (record: RoleItem) => {
      console.log('启用角色', record)
    }

    // 禁用
    const handleDisable = (record: RoleItem) => {
      console.log('禁用角色', record)
    }

    // 删除
    const handleDelete = (record: RoleItem) => {
      console.log('删除角色', record)
    }

    return (
      <div className="app-container">
        <div className="filterForm">
          {/* 搜索区域 */}
          <Form
            layout="inline"
            onFinish={onFinish}
          >
                  <Form.Item label="角色名称" name="roleName">
                    <Input placeholder="请输入角色名称" />
                  </Form.Item>
                  <Form.Item label="角色标识" name="roleId">
                    <Input placeholder="请输入角色标识" />
                  </Form.Item>
                  <Form.Item label="数据权限" name="dataPermission">
                    <Select placeholder="全部">
                      <Select.Option value="">全部</Select.Option>
                      <Select.Option value="全部">全部</Select.Option>
                      <Select.Option value="自定义">自定义</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item label="状态" name="status">
                    <Select placeholder="全部">
                      <Select.Option value="">全部</Select.Option>
                      <Select.Option value="正常">正常</Select.Option>
                      <Select.Option value="禁用">禁用</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item label="操作人" name="operator">
                    <Input placeholder="请输入操作人账号" />
                  </Form.Item>
                  <Form.Item label="操作时间" name="time">
                    <RangePicker placeholder={['开始日期', '结束日期']} />
                  </Form.Item>
              </Form>
              <div className="rightAction">
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button onClick={onReset}>重置</Button>
              </div>
        </div>
        <div>
          <Button type="primary" onClick={handleCreate}>
            + 新增
          </Button>
        </div>
          {/* 表格 */}
          <Table<RoleItem>
            columns={columns}
            dataSource={data}
            rowKey="key"
            pagination={{ pageSize: 10 }}
            tableLayout="fixed"
            scroll={{ x: 1200 }}
          />
      </div>
    )
}

export default observer(TenantManagement)